<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
    <link rel="stylesheet" href="css/head.css">
    <link rel="stylesheet" href="css/word.css">
    <link rel="stylesheet" href="css/other.css">
    <link rel="stylesheet" href="css/lunbo.css">
    <link rel="stylesheet" href="css/select.css">
    <link rel="stylesheet" href="css/shangou.css">
    <link rel="stylesheet" href="css/zhizun.css">
    <link rel="stylesheet" href="css/phone.css">
    <link rel="stylesheet" href="css/video.css">
    <link rel="stylesheet" href="css/shop.css">
    <link rel="stylesheet" href="css/least.css">
</head>
<body>
    <div id="header">
        <img  class="head" src="images/headimg.jpg" alt="">       
    </div>
    <div class="menu">
        <img src="images/menu1.png" alt="">
        <p>手机APP</p>
        <img src="images/menu2.png" alt="">
        <p>个人中心</p>
        <img src="images/menu3.png" alt="">
        <p>售后服务</p>
        <img src="images/menu4.png" alt="">
        <p>人工客服</p>
        <a href="#header"><img src="images/menu5.png" alt=""></a>
        <p>回到顶部</p>
    </div>




    <div class="word">  
        <div class="word-center">
            <span class="word-one">
                <span>小米商城</span>
                <span>|</span>
                <span>MIUI</span>
                <span>|</span>
                <span>IoT</span>
                <span>|</span>
                <span>云服务</span>
                <span>|</span>
                <span>金融</span>
                <span>|</span>
                <span>有品</span>
                <span>|</span>
                <span>小爱开放平台</span>
                <span>|</span>
                <span>企业团购</span>
                <span>|</span>
                <span>资质证照</span>
                <span>|</span>
                <span>协议规则</span>
                <span>|</span>
                <span>下载app</span>
                <span>|</span>
                <span>智能生活</span>
                <span>|</span>
                <span>SelectLocation</span>
            </span>
            <span class="word-two">
                <span>登录</span>
                <span>注册</span>
                <span>消息通知</span>
            </span>
            <span class="word-three">
                <img class="word-img" src="images/gouwuche1.png" alt="">
                <span class="word-car">购物车（0）</span>
            </span>
        </div>
    </div>


    <div class="other">
        <div class="other-center">
            <img class="other-one" src="images/logo-footer.png" alt="">
            <div class="other-two">
                <span>小米手机</span>
                <span>Redmi红米</span>
                <span>电视</span>
                <span>笔记本</span>
                <span>家电</span>
                <span>路由器</span>
                <span>智能硬件</span>
                <span>服务</span>
                <span>社区</span>
            </div>
            <div class="other-three">
                <div class="sousuo-right-c">
                    <span><input type="text"></span>
                    <img class="search" src="images/search.png" alt="">
                    <span><button></button></span>
                </div>
            </div>
        </div>
    </div>


    <div class="lunbo">
        <div class="xiangxi">
            <ul>
                <li>手机 电话卡<img src="images/you.png" alt=""></li>
                <li>电视 盒子<img src="images/you.png" alt=""></li>
                <li>笔记本 显示器<img src="images/you.png" alt=""></li>
                <li>家电 插线板<img src="images/you.png" alt=""></li>
                <li>出行 穿戴<img src="images/you.png" alt=""></li>
                <li>智能 路由器<img src="images/you.png" alt=""></li>
                <li>电源 配件<img src="images/you.png" alt=""></li>
                <li>健康 儿童<img src="images/you.png" alt=""></li>
                <li>耳机 音箱<img src="images/you.png" alt=""></li>
                <li>生活 箱包<img src="images/you.png" alt=""></li>
            </ul>
        </div>
        <div class="swiper-content">
            <img src="images/1.jpg" alt="">
            <img src="images/2.jpg" alt="">
            <img src="images/3.jpg" alt="">
            <img src="images/4.jpg" alt="">
            <img src="images/5.jpg" alt="">
            <img src="images/6.jpg" alt="">
        </div>
        <button class="lunbo-btn" id="prev"></button>
        <button class="lunbo-btn" id="next"></button>
        <div id="btns">
            <span class="current"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <script>
            // 封装:就是一段重复的代码写成函数
            let index = 0;
            $("#next").click(function () {
                index++;
                console.log(index)
                if (index > 4) {
                    index = 0;
                }
                animate(1000)
            })
            
            $("#prev").click(function () {
                index--;
                if (index < 0) {
                    index = 4;
                }
                animate(1000)
            })
            // 点击焦点让对应的下标值的图片显示,重置下标值
            $("#btns span").click(function(){
                index = $(this).index();
                // $(".swiper-content img").eq(index).fadeIn().siblings().fadeOut()
                // $("#btns span").eq(index).addClass("current").siblings().removeClass("current")
                animate(1000)
            })
            function animate(speed) {
                $(".swiper-content img").eq(index).fadeIn(speed).siblings().fadeOut(speed)
                $("#btns span").eq(index).addClass("current").siblings().removeClass("current")
            }
        </script>
    </div>


    <div class="select">
        <div class="select1">
            <div class="select11">
                <div class="fr1">
                    <div class="fr1-t">
                        <img class="image" src="images/mi-miaosha.png" alt="">
                    </div>
                    <div class="fr1-b">
                        <a href="#">小米秒杀</a>
                    </div>    
                </div>
                <div class="fr2">
                    <div class="fr2-t">
                        <img  class="image" src="images/mi-tuangou.png" alt="">
                    </div>
                    <div class="fr2-b">
                        <a href="#">企业团购</a>
                    </div>
                </div>
                <div class="s-t">
                    <div class="s-t1">
                        <img  class="image" src="images/mi-Fma.png" alt="">
                    </div>
                    <div class="s-t2">
                        <a href="#">F码通道</a>
                    </div>
                </div>
            </div>
            <div class="select12">
                <div class="fr3">
                    <div class="fr3-t">
                        <img  class="image" src="images/mi-mifenka.png" alt="">
                    </div>
                    <div class="fr3-b">
                        <a href="#">米粉卡</a>
                    </div>
                </div>
                <div class="fr4">
                    <div class="fr4-t">
                        <img   class="image" src="images/mi-jiuhuanxin.png" alt="">
                    </div>
                    <div class="fr4-b">
                        <a href="#">以旧换新</a>
                    </div>
                </div>
                <div class="s-b">
                    <div class="sb-t">
                        <img class="image" src="images/mi-shoujichongzhi.png" alt="">
                    </div>
                    <div class="sb-b">
                        <a href="#">话费充值</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="select2">
            <img src="images/97.jpg" alt="">
        </div>
        <div class="select3">
            <img src="images/98.jpg" alt="">
        </div>
        <div class="select4">
            <img src="images/99.jpg" alt="">
        </div>
    </div>


    
    <div class="shangou">
        <span class="shangou-top">小米闪购</span>
        <div class="shangou-center">
            <div>
                <img class="shangouone" src="images/shangou11.png" alt="">
            </div>
            <div class="shangou-one">
                <img class="shangoutwo" src="images/shangou1.jpg" alt="">
                <div class="watch">
                    <p class="watch-one">小米手表Color 典雅黑</p>
                    <p class="watch-two">1540种出彩搭配，潮我看齐</p>
                    <span class="watch-three">599元</span>
                    <span class="watch-four">799元</span>
                </div>
            </div>
            <div class="shangou-two">
                <img class="shangouthree" src="images/shangou2.jpg" alt="">
                <div class="music">
                    <p class="watch-one">小米方盒子蓝牙音箱2白色</p>
                    <p class="watch-two">延续经典好声音</p>
                    <span class="watch-three">99元</span>
                    <span class="watch-four">129元</span>        
                </div>
            </div>
            <div class="shangou-three">
                <img class="shangoufour" src="images/shangou3.jpg" alt="">
                <div class="ear">
                    <p class="watch-one">小米真无线蓝牙耳机Air 2 白色</p>
                    <p class="watch-two">智能真无线，轻松舒适戴</p>
                    <span class="watch-three">299元</span>
                    <span class="watch-four">399元</span>
                </div>
            </div>
            <div class="shangou-last">
                <div class="shangoulast">
                    <img class="shangoufive" src="images/shangou4.jpg" alt="">
                    <div class="teeth">
                        <p class="teech-one">贝医生儿童声波电动牙刷（...</p>
                        <p class="teech-two">会讲故事的电动牙刷</p>
                        <span class="teech-three">249元</span>
                        <span class="teech-four">299元</span>
                    </div>                   
                </div>
            </div>
        </div>
    </div>


    <div class="zhizun">
        <img src="images/96.jpg" alt="">
    </div>


    <div class="phone">
        <div class="phone-top">
            <span>手机</span>
        </div>
        <div class="phone-left">
            <img class="phone-one" src="images/95.jpg" alt="">
        </div>
        <div class="phone-right">
            <div class="one">
                <img src="images/94.jpg" alt="">
                <div class="first">
                    <p class="one1">小米10 至尊版</p>
                    <p class="one2">120X 变焦/120W秒充/120Hz屏幕</p>
                    <span class="one3">5299元起</span>
                </div>
              
            </div>
            <div class="two">
                <img src="images/93.jpg" alt="">
                <div class="second">
                    <p class="one1">Redmi K30至尊版</p>
                    <p class="one2">120Hz弹出全面屏，天玑1000+旗舰处</p>
                    <span class="one3">1999元起</span>
                </div>
            </div>
            <div class="three">
                <img src="images/92.jpg" alt="">
                <div class="third">
                    <p class="one1">腾讯黑鲨3S</p>
                    <p class="one2">骁龙865处理器，120Hz刷新率</p>
                    <span class="one3">3999元起</span>
                </div>
            </div>
            <div class="four">
                <img src="images/91.jpg" alt="">
                <div class="fourth">
                    <p class="one1">Redmi 9A</p>
                    <p class="one2">5000mAh长循环大电量, 6.53"超大护</p>
                    <span class="one-3">599元起</span>
                </div>
            </div>
        </div>
        <div class="phone-bottom">
            <div class="five">
                <img src="images/90.jpg" alt="">
                <div class="fiveth">
                    <p class="two1">小米 10 青春版5G</p>
                    <p class="two2">50倍潜望式变焦/轻薄5G手机</p>
                    <span class="two3">1899元起</span>
                    <span class="two4">2099元</span>
                </div>
              
            </div>
            <div class="six">
                <img src="images/89.jpg" alt="">
                <div class="sixth">
                    <p class="two1">小米10</p>
                    <p class="two2">骁龙865/1亿像素相机</p>
                    <span class="two3">3799元起</span>
                    <span class="two4">3999元</span>
                </div>
            </div>
            <div class="seven">
                <img src="images/88.jpg" alt="">
                <div class="seventh">
                    <p class="two1">Redmi K30 Pro</p>
                    <p class="two2">双模5G,骁龙865,弹出全面屏</p>
                    <span class="two3">2699元起</span>
                    <span class="two4">3399</span>
                </div>
            </div>
            <div class="eight">
                <img src="images/87.jpg" alt="">
                <div class="eightth">
                    <p class="two1">Redmi K30 Pro变焦版</p>
                    <p class="two2">双模5G,骁龙865,弹出全面屏</p>
                    <span class="two-3">3399元</span>
                </div>
            </div>         
        </div>
    </div>


    <div class="video">
        <div class="video-top">
            <span class="top1">视频</span>
            <span class="top2">查看全部</span>
        </div> 
        <div class="video-center">
            <div class="video-one">
                <img src="images/mi-video1.jpg" alt="">
                <div class="videoone">
                    <p class="three1">Redmi 10X系列发布会</p>
                    <p class="three2">Redmi 10X系列发布会</p>
                </div>
            </div>
            <div class="video-two">
                <img src="images/mi-video2.jpg" alt="">
                <div class="videotwo">
                    <p class="three1">小米10 青春版发布会</p>
                </div>
            </div>
            <div class="video-three">
                <img src="images/mi-video3.jpg" alt="">
                <div class="videothree">
                    <p class="three1">小米10 8K手机拍大片 </p>
                </div>
            </div>
            <div class="video-four">
                <img src="images/mi-video4.jpg" alt="">
                <div class="videofour">
                    <p class="three1">小米10发布会</p>
                </div>
            </div>
        </div> 
    </div>


    <div class="shop">
        <div class="shop-top">
            <span><img src="images/shouhou1.png" alt=""></span>
            <span>预约维修服务</span>
            <span>|</span>
            <span><img src="images/7.PNG" alt=""></span>
            <span>7天无理由退货</span>
            <span>|</span>
            <span><img src="images/15.PNG" alt=""></span>
            <span>15天免费换货</span>
            <span>|</span>
            <span><img src="images/gift.PNG" alt=""></span>
            <span>满99元包邮</span>
            <span>|</span>
            <span><img src="images/location.PNG" alt=""></span>
            <span>520余家售后网点</span>
            <div class="underline"></div>
            <div class="bottom-left">
                <span class="help">帮助中心</span><br>
                <span>账户管理</span><br>
                <span>购物指南</span><br>
                <span>订单操作</span>
            </div>
            <div class="bottom-two">
                <span class="server">服务支持</span><br>
                <span>售后政策</span><br>
                <span>自助服务</span><br>
                <span>相关下载</span>
            </div>
            <div class="bottom-three">
                <span class="down">线下门店</span><br>
                <span>小米之家</span><br>
                <span>服务网点</span><br>
                <span>授权体验店</span>
            </div>
            <div class="bottom-four">
                <span class="about">关于小米</span><br>
                <span>了解小米</span><br>
                <span>加入小米</span><br>
                <span>投资者关系</span><br>
                <span>企业社会责任</span><br>
                <span>廉洁举报</span>
            </div>
            <div class="bottom-five">
                <span class="us">关注我们</span><br>
                <span>新浪微博</span><br>
                <span>官方微信</span><br>
                <span>联系我们</span><br>
                <span>公益基金会</span>
            </div>
            <div class="bottom-six">
                <span class="different">特色服务</span><br>
                <span>F码通道</span><br>
                <span>礼物码</span><br>
                <span>防伪查询</span>
            </div>
            <div class="bottom-right">
                <img  src="images/2333.png" alt="">
            </div>
       </div>
    </div>


    <div class="least" >
        <div class="least-one">
            <div class="least-logo">
                <img src="images/logo-footer.png" alt="">
            </div>   
    
            <div class="xiamiandewenzi">
                <p class="jjj1">小米商城 | MIUI | 米家 | 米聊 | 多看 | 游戏 | 政企服务 | 小米天猫店 | 小米集团隐私政策 | 小米公司儿童信息保护规则 | 小米商城隐私政策 | 小米商城用户协议 | 问题反馈 | Select Location</p>
    
           <p class="jjj2">   mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2020]0276-042号
           <br>        （京）网械平台备字（2018）第00005号 互联网药品信息服务资格证 (京)-非经营性-2014-0090 营业执照 医疗器械质量公告<br>
                    增值电信业务许可证 网络食品经营备案 京食药网食备202010048   食品经营许可证<br>
                    违法和不良信息举报电话：171-5104-4404 知识产权侵权投诉 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</br>
    
            </div>
    
            <img  class="jjj3"src="images/33336.png" alt="">
    
            <img  class="jjj4"src="images/slogan2020.png" alt="">

        </div>
    </div>
    </div>     
</body>
</html>